{
  const productDOM = document.querySelector("nav>a:nth-of-type(1)");
  const articleDOM = document.querySelector("nav>a:nth-of-type(2)");
  const leftDOM = document.querySelector(".left");
  const mainDOM = document.querySelector(".main");
  const productTableDOM = document.querySelector("table");

  productDOM.addEventListener("click", function(event){
    renderLeft2Product();
    renderMain2Product();
  });
  articleDOM.addEventListener("click", function(event){
    renderLeft2Article();
    renderMain2Article();
  });

  function renderProductTableHead(){

    const trHDOM = document.createElement("tr");
    const thNameDOM = document.createElement("th");
    thNameDOM.innerText = "name";
    trHDOM.insertAdjacentElement("beforeEnd",thNameDOM);
    const thInformationDOM = document.createElement("th");
    thInformationDOM.innerText = "information";
    trHDOM.insertAdjacentElement("beforeEnd",thInformationDOM);
    const thPriceDOM = document.createElement("th");
    thPriceDOM.innerText = "price";
    trHDOM.insertAdjacentElement("beforeEnd",thPriceDOM);
    const thPicDOM = document.createElement("th");
    thPicDOM.innerText = "picture";
    trHDOM.insertAdjacentElement("beforeEnd",thPicDOM);
    productTableDOM.insertAdjacentElement("beforeEnd",trHDOM);
  }

  function renderArticleTableHead(){
    const trHDOM = document.createElement("tr");
    const thTitleDOM = document.createElement("th");
    thTitleDOM.innerText = "title";
    trHDOM.insertAdjacentElement("beforeEnd",thTitleDOM);
    // const thTextDOM = document.createElement("th");
    // thTextDOM.innerText = "text";
    // trHDOM.insertAdjacentElement("beforeEnd",thTextDOM);
    const thAuthorDOM = document.createElement("th");
    thAuthorDOM.innerText = "author";
    trHDOM.insertAdjacentElement("beforeEnd",thAuthorDOM);
    const thCreateTimeDOM = document.createElement("th");
    thCreateTimeDOM.innerText = "createTime";
    trHDOM.insertAdjacentElement("beforeEnd",thCreateTimeDOM);
    const thUpdateTimeDOM = document.createElement("th");
    thUpdateTimeDOM.innerText = "updateTime";
    trHDOM.insertAdjacentElement("beforeEnd",thUpdateTimeDOM);
    productTableDOM.insertAdjacentElement("beforeEnd",trHDOM);
  }

  function renderMain2Product(){
    xhrRequest("GET","/admin/products", null, function(res){
      console.log("res:"+res.length);
      productTableDOM.innerText = "";
      renderProductTableHead();
      if(res.length>0){
        // const ulDOM = document.createElement("ul");
        for(product of res){
          // const boxDOM = document.createElement("div");
          // boxDOM.class = ".box";
          // const liDOM = document.createElement("li");
          const trItemDOM = document.createElement("tr");
          const tdNameDOM = document.createElement("td");
          const nameDOM = document.createElement("a");
          nameDOM.class = ".name";
          nameDOM.innerText = product.name;
          nameDOM.href = "/admin/product/"+product.file.filename;
          // liDOM.insertAdjacentElement("beforeEnd", nameDOM);
          tdNameDOM.insertAdjacentElement("beforeEnd", nameDOM);
          trItemDOM.insertAdjacentElement("beforeEnd", tdNameDOM);
          const tdInformationDOM = document.createElement("td");
          const tdPriceDOM = document.createElement("td");
          const pInfoDOM = document.createElement("p");
          const pPriceDOM = document.createElement("p");
          pInfoDOM.class = ".information";
          pPriceDOM.class = ".price"
          pInfoDOM.innerText = product.information;
          pPriceDOM.innerText = product.price;
          tdInformationDOM.insertAdjacentElement("beforeEnd", pInfoDOM);
          trItemDOM.insertAdjacentElement("beforeEnd", tdInformationDOM);
          tdPriceDOM.insertAdjacentElement("beforeEnd", pPriceDOM);
          trItemDOM.insertAdjacentElement("beforeEnd", tdPriceDOM);
          var img = new Image();
          img.src = "/admin/img/"+product.file.filename;
          img.width = 100;
          img.height = 100
          tdPicDOM = document.createElement("td");
          tdPicDOM.insertAdjacentElement("beforeEnd",img);
          trItemDOM.insertAdjacentElement("beforeEnd", tdPicDOM);
          const tdDelDOM = document.createElement("td");
          const delDOM = document.createElement("a");
          delDOM.class = ".del"
          delDOM.href = "/admin/delete/"+product.file.filename;
          delDOM.innerText = "delete"
          tdDelDOM.insertAdjacentElement("beforeEnd", delDOM);
          trItemDOM.insertAdjacentElement("beforeEnd", tdDelDOM);
          productTableDOM.insertAdjacentElement("beforeEnd", trItemDOM);
        }
      }
    });
  }

  function renderMain2Article(){
    productTableDOM.innerText = "";
    xhrRequest("GET", "/admin/articles", null, function(res){
      renderArticleTableHead();
      if(res.length>0){
        for(article of res){
          const trItemDOM = document.createElement("tr");
          const tdTitleDOM = document.createElement("td");
          const titleDOM = document.createElement("a");
          titleDOM.innerText = article.title;
          titleDOM.href = "/admin/article/"+article.id;
          tdTitleDOM.insertAdjacentElement("beforeEnd", titleDOM);
          trItemDOM.insertAdjacentElement("beforeEnd",tdTitleDOM);
          const tdAuthorDOM = document.createElement("td");
          const authorDOM = document.createElement("a");
          authorDOM.innerText = article.author;
          tdAuthorDOM.insertAdjacentElement("beforeEnd", authorDOM);
          trItemDOM.insertAdjacentElement("beforeEnd",tdAuthorDOM);
          const tdupdateTimeDOM = document.createElement("td");
          const updateTimeDOM = document.createElement("a");
          updateTimeDOM.innerText = article.updateTime;
          tdupdateTimeDOM.insertAdjacentElement("beforeEnd",updateTimeDOM);
          trItemDOM.insertAdjacentElement("beforeEnd",tdupdateTimeDOM);
          const tdcreateTimeDOM = document.createElement("td");
          const createTimeDOM = document.createElement("a");
          createTimeDOM.innerText = article.createTime;
          tdcreateTimeDOM.insertAdjacentElement("beforeEnd", createTimeDOM);
          trItemDOM.insertAdjacentElement("beforeEnd",tdcreateTimeDOM);
          const tdDelDOM = document.createElement("td");
          const delDOM = document.createElement("a");
          delDOM.innerText = "delete";
          tdDelDOM.insertAdjacentElement("beforeEnd", delDOM);
          trItemDOM.insertAdjacentElement("beforeEnd",tdDelDOM);
          productTableDOM.insertAdjacentElement("beforeEnd",trItemDOM);
        }
      }
    });
  }


  function renderLeft2Product(){
    leftDOM.innerText = "";
    const createProduct = document.createElement("a");
    createProduct.innerText = "添加产品";
    createProduct.href = "/admin/admin_product_create"
    leftDOM.insertAdjacentElement("beforeEnd",createProduct);

  }

  function renderLeft2Article(){
    leftDOM.innerText = "";
    const createArticle = document.createElement("a");
    createArticle.innerText = "添加文章";
    createArticle.href = "/admin/createarticle";
    leftDOM.insertAdjacentElement("beforeEnd", createArticle);
  }


  function xhrRequest(type, url, formdata, method){
    var xhr = new XMLHttpRequest();
    xhr.open(type, url);
    xhr.responseType = "json";
    // console.log("json");
    xhr.onreadystatechange = function(){
      if(xhr.status == 200 && xhr.readyState == 4){
        // console.log("method");
        method(xhr.response)
      }
    }
    if(arguments.length>=4){
      xhr.send(formdata);
    }
  }
}
